<template>
	<view class="course-detail">

		<view class="top-background">

		</view>



		<view class="info">

			<view class="top">
				<uni-icons style="margin-left: 30rpx;" type="left" size="30" color="#535353" @click="toBackPage">
				</uni-icons>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<uni-icons style="margin-right: 40rpx;" type="compose" size="30" color="#535353"
						@click="toCourseManage('info')"></uni-icons>
				</view>
			</view>

			<view class="course-info">
				<view class="cover">
					<image mode="aspectFill" :src="courseInfo.cover"></image>
				</view>
				<view class="right">
					<view class="name">{{courseInfo.name}}</view>
					<view class="description">{{courseInfo.description}}</view>
				</view>
			</view>

			<view class="course-status">
				<view class="item">
					<view class="item-top">
						{{courseInfo.userCount}}
					</view>
					<view class="item-bottom">
						已学人数
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						{{courseInfo.fixedCount}}
					</view>
					<view class="item-bottom">
						常驻人数
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						{{courseInfo.chapterCount}}章/{{courseInfo.sectionCount}}节
					</view>
					<view class="item-bottom">
						{{courseStatus[courseInfo.status]}}
					</view>
				</view>
			</view>

			<view class="content">

				<view class="tabs">
					<view class="tab" :class="index==TabCur?'tab-current':''" v-for="(item,index) in tabList"
						:key="index" @tap="tabSelect(index)">
						<view :class="index==TabCur?'tab-text-on':'tab-text'">{{item}}</view>
						<view v-if="index==TabCur" class="tab-line"></view>
					</view>
				</view>
				<!-- 概览界面 -->
				<view v-show="TabCur === 0" class="tab-card introduce">
					<view class="overview" v-for="(item,index) in noticeList">
						<view v-html="item.content" style="line-height: 50rpx;"></view>
					</view>
				</view>
				<!-- 审核界面 -->
				<view v-show="TabCur === 1" class="audits">
					<view class="audit" v-for="(item,index) in auditList" @click="toAuditDetail(item)"
						:style="{'background-color' : item.isReaded ? '#eaeaea' : ''}">
						<view style="display: flex;flex-direction: column;">
							<view class="title">{{item.reportReason}}</view>
							<view class="type">类型：{{item.contentType}}</view>
							<view class="nickname">发起人：{{item.nickname}}</view>
						</view>

						<uni-icons style="margin-left: 30rpx;" type="right" size="20" color="#eaeaea"></uni-icons>
					</view>
				</view>
				<!-- 私信界面 -->
				<view v-show="TabCur === 2" class="messages">
					<view v-if="messages.length===0" style="padding: 30rpx;text-align: center;font-size: 34rpx;">
						暂时还没有私信
					</view>
					<view class="message" v-for="(item,index) in messages"
						:style="{'background-color' : item.isReaded ? '#eaeaea' : ''}">
						<view class="message-top">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view class="avatar">
									<image mode="aspectFill" :src="item.avatar"></image>
								</view>
								<view style="margin-left: 20rpx;">{{item.nickname}}</view>
							</view>
							<view class="date">昨天8:03</view>
						</view>
						<view class="message-content">{{item.content}}</view>
					</view>
				</view>
				<!-- 管理界面 -->
				<view v-show="TabCur === 3" class="manage">
					<view class="manage-buttons">
						<view class="manage-button" @click="toCourseManage('user')">
							<view class="icon"></view>
							<view class="text">用户管理</view>
						</view>
						<view class="manage-button" @click="toCourseManage('comment')">
							<view class="icon"></view>
							<view class="text">评论管理</view>
						</view>
						<view class="manage-button" @click="toCourseManage('talk')">
							<view class="icon"></view>
							<view class="text">箴言管理</view>
						</view>
						<view class="manage-button" @click="toTeamManage()">
							<view class="icon"></view>
							<view class="text">团队管理</view>
						</view>
					</view>


					<view class="todos">

						<view class="todos-title">
							<view>近期待办</view>
						</view>

						<view class="todo" @touchstart="touchstartX" @tap="resetX" @touchmove="touchmoveX"
							@touchend="touchendX" :animation="currentIndex === index ? animation : ''"
							:data-index="index" v-for="(item, index) in todoList" :key="item.id">
							<view class="todo-card"
								:style="'background-color: ' + (item.teamTodoId == null ? '' : 'rgb(212,234,253)') + ';'">
								<checkbox-group class="todo-check" @change="finishTodo(item.id)" :data-todoId="item.id">
									<checkbox value="checked"></checkbox>
								</checkbox-group>

								<view class="todo-info" style="width: 100%">
									<view class="todo-title">{{ item.title }}</view>
									<view
										style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
										<view class="todo-brief" v-if="item.gmtEnd != null">
											截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
										<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
										</view>
									</view>
								</view>

								<view class="todo-btns">
									<view class="detail" @tap="showTodoEdit(item)">修改</view>
									<view class="delete" @tap="deleteTodo()">删除</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="todoEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">待办</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" v-model="todoInput.title" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">截止时间</text>
						<picker mode="date" :value="todoInput.date" :start="today" end="2022-12-30"
							@change="bindDateChange()">
							<view class="picker-input">当前选择: {{ todoInput.date ? todoInput.date : '无截止日期' }}</view>
						</picker>
					</view>
					<view class="modal-main-item">
						<text class="modal-key">标签</text>
						<view class="modal-tags">
							<view class="modal-tag" @tap="changeChosenTag(index)"
								:class="{'chosen-tag' : chosenTagsIndex[index]}" v-for="(item, index) in tags"
								:key="index">
								{{ item.name }}
							</view>
							<text v-if="tags.length == 0">还未添加标签噢</text>
						</view>
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

		<view class="page-btns" v-if="TabCur === 3">
			<view class="button">
				<img src="https://www.cdn.kxcdedu.top/image/default/85118A5CE98948DD9D78170B280BCA5D-6-2.png" />
			</view>
		</view>

	</view>

</template>

<script>
	let movedistance = 0;


	export default {
		data() {
			return {
				courseInfo: {},
				courseStatus: ["更新中", "已完结", "已关闭"],

				noticeList: [],

				auditList: [],
				messages: [{
						id: "",
						content: "近几年青少年抑郁者迅速增多，许多悲观论调也流传甚广，不知道为什么，我从最初会心，我从最初会",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					}
				],



				currentIndex: '',
				animation: '',
				todoList: [{
						id: "1",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					},
					{
						id: "2",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					}
				],
				todoInput: {
					title: "",
					data: null
				},
				today: null,
				tags: [{
						name: "今日"
					},
					{
						name: "重要"
					}
				],
				chosenTagsIndex: [false, false],



				tabList: ['公告', '举报', '私信', '管理'],
				TabCur: 0,
				scrollLeft: 0
			}
		},
		onLoad(options) {
			if (options.courseId) {
				this.courseInfo.id = options.courseId
				this.getCourseManageInfo()
				this.listNotice()
				this.pageReportOrderByTime()
			}
		},
		onShow() {
			this.getCourseManageInfo()
		},
		methods: {
			getCourseManageInfo(courseId) {
				var that = this
				this.$api.getCourseManageInfo({
					courseId: this.courseInfo.id
				}).then(res => {
					that.courseInfo = res.data;
				})
			},
			//获取公告
			listNotice() {
				var that = this
				this.$api.listNotice({
					courseId: this.courseInfo.id
				}).then(res => {
					that.noticeList = res.data;
				})
			},
			pageReportOrderByTime() {
				this.$api.pageReport({
					pageNow: 1,
					pageSize: 20,
					range: 1,
					sourceId: this.courseInfo.id
				}).then(res => {
					this.auditList = res.data.rows;
				})
			},
			showTodoEdit(item) {
				if (item == null) {
					this.todoInput = {
						title: "",
						data: null
					}
				} else {
					this.todoInput = item
				}

				this.$refs.todoEdit.open('bottom')
			},
			addTodo: function() {
				this.$api.addTodo({
					title: this.todoInput.title,
					date: this.todoInput.date,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			deleteTodo: function(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该待办吗',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTodo({
								id
							}).then(res => {
								that.getMyTodayTodoList()
							})
						}
					}
				});
			},
			updateTodo: function() {
				this.$api.updateTodo({
					date: this.todoInput.date,
					title: this.todoInput.title,
					id: this.todoInput.id,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			finishTodo: function(id) {
				this.$api.finishTodo({
					id
				}).then(res => {
					uni.showToast({
						title: '已完成',
						duration: 500
					});
					this.getMyTodayTodoList()
				})
			},
			// 标签选中标记数组 -> id数组
			indexToTagIds: function() {
				let ids = [];

				for (let i = 0; i < this.chosenTagsIndex.length; i++) {
					if (this.chosenTagsIndex[i]) {
						ids.push(this.tags[i].id);
					}
				}

				return ids;
			},
			tagIdsToIndex: function(ids) {
				let chosenTagsIndex = [];
				for (let i = 0; i < this.tags.length; i++) {
					for (let id of ids) {
						if (id === this.tags[i].id) {
							chosenTagsIndex.push(true);
							break;
						}
					}
					if (chosenTagsIndex[i] != true) {
						chosenTagsIndex.push(false);
					}
				}
				this.chosenTagsIndex = chosenTagsIndex
			},
			changeChosenTag: function(chosenindex) {
				console.log(chosenindex)
				this.chosenTagsIndex[chosenindex] = !this.chosenTagsIndex[chosenindex];
				this.$forceUpdate()
			},




			touchstartX(e) {
				this.currentIndex = e.currentTarget.dataset.index // 获取触摸X坐标

				this.recordX = e.touches[0].clientX;
			},
			touchmoveX(e) {
				let currentX = e.touches[0].clientX;
				movedistance = currentX - this.recordX; // 获取移动距离

				if (movedistance > 0) {
					return;
				}

				if (movedistance < 0 && movedistance > -15) {
					return;
				}

				this.slideAnimation(movedistance, 20);
			},
			resetX() {
				this.slideAnimation(0, 200);
			},
			touchendX() {
				let recordX;

				if (movedistance <= -50) {
					recordX = -220;
				} else if (movedistance >= -50) {
					recordX = 0;
				}

				this.slideAnimation(recordX, 200);
			},
			slideAnimation(recordX, time) {
				let animation = uni.createAnimation({
					duration: time,
					timingFunction: 'ease'
				});
				animation.translate(recordX + 'rpx', 0).step();
				this.animation = animation.export()
			},



			toAuditDetail(audit) {
				if (audit.contentType == '知桨-回复') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/course/course-comment-manage?courseId="
						+this.courseInfo.id+"&linkId="
						+audit.linkId+"&auditId="
						+audit.id
					})
				} else if (audit.contentType == '知桨-箴言') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/course/course-talk-manage?courseId="
						+this.courseInfo.id+"&linkId="
						+audit.linkId+"&auditId="
						+audit.id
					})
				}
			},
			toCourseManage(name) {
				uni.navigateTo({
					url: "/pages_self/wind/manage/course/course-" + name + "-manage?courseId=" + this.courseInfo.id
				})
			},
			toTeamManage() {
				uni.navigateTo({
					url: "/pages_self/wind/manage/team/team-manage?teamId=" + this.courseInfo.teamId
				})
			},
			toBackPage() {
				uni.navigateBack()
			},
			tabSelect(index) {
				this.TabCur = index
				this.scrollLeft = (index - 1) * 60
			}
		}
	}
</script>

<style scoped lang="scss">
	.course-detail {
		background-color: #F9F9F9;


		.top-background {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 950rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;

		}

		.info {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;



			.top {
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 100rpx;
			}


			.course-info {
				width: 690rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.cover {
					width: 320rpx;
					height: 200rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.right {
					display: flex;
					flex-direction: column;
					width: 350rpx;
					height: 200rpx;
					justify-content: space-between;

					.name {
						font-size: 40rpx;
						color: #5DACB1;
					}

					.description {
						font-size: 30rpx;
						color: #535353;

						/*超过范围进行隐藏不显示*/
						overflow: hidden;
						/*文本溢出, 使用省略号 */
						text-overflow: ellipsis;
						/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
						display: -webkit-box;
						/*限制块容器显示的文本行数, 按照你的需求设置*/
						-webkit-line-clamp: 3;
						/*盒子的方向, 垂直、水平等*/
						-webkit-box-orient: vertical;
						/*文字换行, 可以在单词内断*/
						word-wrap: break-word;
					}
				}

			}

			.course-status {
				width: 700rpx;
				margin-left: 20rpx;
				margin-top: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 200rpx;
					height: 100rpx;

					.item-top {
						font-size: 36rpx;
						color: #5DACB1;
					}

					.item-bottom {
						font-size: 28rpx;
						color: #535353;
					}
				}

				.split-line {
					width: 3rpx;
					height: 60rpx;
					background-color: #2c2c2c;
				}

			}


			.content {
				width: 100%;
				background-color: #F9F9F9;
				border-radius: 40rpx;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				min-height: 80vh;





				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 40rpx;
					margin-bottom: 20rpx;

					.tab {
						margin-left: 50rpx;
						color: gray;
						height: 65rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #5DACB1;
						font-weight: bold;
					}

					.tab-line {
						width: 40rpx;
						height: 7rpx;
						border-radius: 5rpx;
						background-color: #5DACB1;
					}
				}


				.tab-card {
					width: 670rpx;
					margin-left: 40rpx;
					margin-top: 30rpx;
					min-height: 1200rpx;


					.overview {
						padding: 40rpx;
						background-color: #FFFFFF;
						border-radius: 20rpx;
						position: relative;
						margin-bottom: 30rpx;
					}
				}

				.audits {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;

					.audit {
						display: flex;
						flex-direction: row;
						margin-bottom: 30rpx;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;

						.title {
							font-weight: bold;
						}

						.type {
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #9d9d9d;
						}

						.nickname {
							font-size: 28rpx;
							margin-top: 5rpx;
							color: #9d9d9d;
						}

					}
				}

				.messages {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;


					.message {
						display: flex;
						flex-direction: column;
						margin-bottom: 30rpx;
						padding: 30rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;

						.message-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;

							.avatar {
								height: 60rpx;
								width: 60rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.date {
								font-size: 28rpx;
								color: gray;
							}

						}

						.message-content {
							margin-top: 20rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 2;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}
				}

				.manage {
					display: flex;
					flex-direction: column;

					.manage-buttons {
						width: 670rpx;
						margin-left: 20px;

						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 10rpx;

						.manage-button {
							width: 130rpx;
							height: 175rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.icon {
								width: 130rpx;
								height: 130rpx;
								background-color: #FFFFFF;
								border-radius: 20rpx;
							}

							.text {
								font-size: 28rpx;
							}



						}
					}

					.todos {
						display: flex;
						flex-direction: column;
						position: relative;
						z-index: 2;
						width: 720rpx;
						overflow: hidden;
						margin-left: 30rpx;




						.todos-title {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;


							font-size: 36rpx;
							margin: 40rpx 0;
							margin-left: 10rpx;
							font-weight: bold;
						}

						.todo {

							width: 690rpx;
							box-shadow: 0px 0px 4px 2px #f5f7f5;
							padding: 20rpx 0;
							border-radius: 25rpx;
							background-color: #FFFFFF;
							margin-bottom: 30rpx;


							.todo-card {
								display: flex;
								align-items: center;


								.todo-check {
									margin: 0 20rpx;
								}

								.todo-info {
									display: block;
								}

								.todo-title {
									font-size: 32rpx;
								}

								.todo-brief {
									font-size: 24rpx;
									color: gray
								}

								/* 待办滑动操作按钮 */
								.todo-btns {
									position: absolute;
									right: -310rpx;

									display: flex;
									justify-content: left;
									align-items: center;

									box-sizing: border-box;
									width: 300rpx;
									height: 120rpx;
									padding-left: 40rpx;

									text-align: center;
									color: #fff;
									line-height: 120rpx;
								}

								.todo-btns view {
									width: 80rpx;
									height: 120rpx;
									font-size: 28rpx;
									margin-right: 20rpx;
									border-radius: 20rpx;
								}

								.todo-btns .detail {
									background-color: #97C5FC;
								}
							}

							.todo-btns .delete {
								background-color: #f10e0e;
							}
						}
					}

				}

			}

		}

		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 200rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 26rpx;
				margin: 20rpx 0 40rpx;


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;
						padding-left: 10rpx;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}

				.modal input,
				.modal .picker-input {
					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: 600;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}


		.page-btns {
			display: flex;
			position: fixed;
			right: 120rpx;
			bottom: 120rpx;
			z-index: 10;


			.button {
				width: 150rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// border: solid #5DACB1;



				border-radius: 50rpx;
				color: white;
			}
		}
	}



	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
